<template>
	<view class="root">
		<view>
			<view class="box margin-bottom_10">
				<view class="tip">提现金额</view>
				<view class="flex items-center Amount">
					<view class="rmb">￥</view>
					<view class="flex-1"><input class="uni-input" type="digit" maxlength="10" focus @input="onInput" v-model.trim="amount" /></view>
					<view class="darkColor">可提现金额 ￥{{ withdrawable }}</view>
				</view>
				<view class="gray">最低提现￥{{ lowest }}, 最高提现5000</view>
			</view>
			<view class="box">
				<view class="tip">请选择提现方式</view>
				<view class="flex flex-wrap justify-between">
					<view class="list-li text-center flex items-center justify-center inhert" v-for="(item, index) in clearing_form" :key="index" @click="changeType(item)">
						<view>
							<text :class="withdrawList[item].type"></text>
							<text style="margin-left: 23rpx;">{{ withdrawList[item].name }}</text>
						</view>
						<view style="font-size: 20rpx;width: 80%;margin-top: 27rpx;">{{withdrawList[item].text}}</view>
						<Icon v-if="current == item" class="selected" type="iconjiaobiao" color="#F93B3F" size="25"></Icon>
					</view>
				</view>
			</view>
			<view><button @click="withdraw" :loading="isWait" :disabled='isWait' class="withdraw-btn mainColor border-25">提现</button></view>
		</view>
		<uni-popup ref="popup" type="center" :maskClick="false">
			<msg-content title="提现申请已提交请耐心等待"  :icon="image_header+'withdraw2.png'" @sendcancel="close">
				<view class="info-account"><button @click="close" class="msg-btn mainColor border-25">确定</button></view>
			</msg-content>
		</uni-popup>
	</view>
</template>

<script>
let App = getApp().globalData;
import Icon from '@/components/Icon/Icon.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import msgContent from '@/components/msg-content.vue';
export default {
	components: {
		Icon,
		uniPopup,
		msgContent
	},
	data() {
		return {
			inputMaxL: 7,
			lowest: 0, //最低可提现金额
			amount: 0, // 提现金额
			withdrawable: 0, // 可提现金额
			current: 0,
			isWait:false,
			withdrawList: [
				{
					type: 'qh-rt-single qh-rt-a-zu4332',
					name: '自动打款',
					color: '#50A846',
					text:'通过微信支付官方的商家转账到零钱工具，自动打款到您的微信零钱账户'
				},
				{
					type: 'qh-rt-single qh-rt-a-zu4332',
					name: '线下微信',
					color: '#50A846',
					text:'待商家打款到您预留的微信手机号对应的微信零钱账户'
				},
				{
					type: 'qh-rt-single qh-rt-a-lujing1531',
					name: '线下支付宝',
					color: '#50A846',
					text:'待商家打款到您预留的支付宝账户'
				},
				{
					type: 'qh-rt-single qh-rt-a-zu4334',
					name: '线下银行卡',
					color: '#50A846',
					text:'待商家打款到您预留的银行卡账户'
				}
			],
			clearing_form:[],
			image_header:'',
		};
	},
     
	async onLoad() {
		await this.$onLaunched;
		this.getWithdrawalConfig()
		this.image_header = this.$store.image_header;
	},
	 
	methods: {
		changeType(i) {
			this.current = i;
		},

		getWithdrawalConfig() {
			let _self = this;
			this.$request('Distribution/MiniDistributor/getWithdrawalConfig').then(res => {
				if (res.status === 1) {
					_self.lowest = res.data.min_withdrawal_money;
					_self.withdrawable = res.data.settable_amount;
				    _self.amount = res.data.settable_amount;
					_self.clearing_form = res.data.clearing_form;
					_self.current = res.data.clearing_form[0];
				} else {
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},

		//
		withdraw() {
			this.isWait = true;
			if (!this.amount) {
				App.showToast({
					title: '提现金额输入有误',
					icon: 'none'
				});
				this.isWait = false;
				return false;
			}
			if (this.withdrawable <= 0 || !this.withdrawable) {
				App.showToast({
					title: '提现金额不足',
					icon: 'none'
				});
				this.isWait = false;
				return false;
			}

			if (parseFloat(this.amount) < parseFloat(this.lowest)) {
				App.showToast({
					title: '最低提现金额为' + this.lowest,
					icon: 'none'
				});
				this.isWait = false;
				return false;
			}
			let obj = {
				withdrawal_way: this.current,
				withdrawal_money: this.amount
			};
			let _self = this;
			this.$request('Distribution/MiniDistributor/userApplyWithdrawal', obj).then(res => {
				this.isWait = false;
				if (res.status === 1) {
					// {0待审核 1提现成功 2打款处理中}
					if(res.data.status==0){
						_self.$refs.popup.open();
					}else if(res.data.status==1){
						
						App.showToast({
							title: res.msg,
							icon: 'none',
							duration:2500,
							success:function(){
								uni.navigateBack()
							}
						});

					}else {
						_self.$refs.popup.open();
					}
					_self.amount = '';
				} else {
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},
		close() {
			this.$refs.popup.close();
			this.amount = '';
			uni.navigateBack({
				delta: 1
			})
		},

		onInput(e) {
			let money = e.detail.value;
			let m = money.match(/^\d*(\.?\d{0,2})/g)[0] || null;
			this.$nextTick(() => {
				this.amount = m;
			});
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	.bg;
}
.root {
	box-sizing: border-box;
	padding: 15rpx 25rpx;
}
.box {
	background-color: #fff;
	padding: 20rpx;

	.Amount {
		border-bottom: 1px solid #f6f6f6;
		margin: 25rpx 0;
		padding-bottom: 15rpx;
		.rmb {
			font-size: 40rpx;
		}
		.darkColor {
			font-size: 26rpx;
		}
	}
	.tip {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}
	.gray {
		font-size: 26rpx;
	}

	.list-li {
		position: relative;
		width: 48%;
		.bg;
		border-radius: @border-radius-ms;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		padding: 35rpx 0;
	}
}

.withdraw-btn {
	margin-top: 50rpx;
	color: #fff;
}
.msg-btn {
	color: #fff;
	height: 80rpx;
	width: 80%;
	line-height: 80rpx;
	font-size: 30rpx;
}
.selected {
	position: absolute;
	top: -4rpx;
	right: 0;
}
.info-account {
	box-sizing: border-box;
	padding: 30rpx 45rpx 50rpx;
}
/deep/ .uni-popup__wrapper-box {
	width: 70%;
}
.inhert{
	flex-wrap: inherit;
}
</style>
